<template>
  <el-dialog
    v-if="dialogUserVisible"
    :visible.sync="dialogUserVisible"
    :title="title"
    destroy-on-close
    lock-scroll
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    width="50%"
    class="auth-dialog"
    @close="handleCancel"
  >
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item label="姓名">
        <el-input v-model="listQuery.text" placeholder="请输入姓名,回车搜索" style="width: 230px; text-align: right;" @keyup.enter.native="search">
          <el-button slot="append" icon="el-icon-search" @click="search" />
        </el-input>
      </el-form-item>
    </el-form>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="userList"
      border
      fit
      stripe
      @select="handleSelectionChange"
      @select-all="handleSelectionAll"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="姓名" prop="userName" />
      <el-table-column label="登录名称" prop="loginName" />
      <el-table-column label="学院编号" prop="collegeNo" />
      <el-table-column label="学院名称" prop="collegeName" />
      <el-table-column label="职称编号" prop="jobNo" />
    </el-table>
    <div v-if="!listLoading">
      <el-pagination :current-page.sync="listQuery.pageVO.pageIndex" :page-sizes="[5, 10, 20,30,50,80]" :page-size="listQuery.pageVO.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <div v-if="userObjs.length > 0">
      <span>已勾选:</span>
      <div>
        <el-tag
          v-for="tag in userObjs"
          :key="tag.userNo"
          closable
          type="primary"
          effect="dark"
          style="margin-left: 10px;margin-top: 10px;"
          @close="handleCloseTag(tag)"
        >
          {{ tag.userName }}
        </el-tag>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
// import { getUser } from '@/api/basic/user'
export default {
  name: 'TeacherSelectTable',
  props: {
    userSelectDialogShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '关联用户'
    },
    userSelected: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      userList: [], // 用户列表
      userObjs: [],
      dialogUserVisible: false,
      listLoading: false,
      listQuery: {
        text: '',
        status: 1,
        pageVO: {
          pageIndex: 1,
          pageSize: 5
        }
      },
      total: 0,
      collegeList: []
    }
  },
  watch: {
    userSelectDialogShow(val, oldVal) {
      this.dialogUserVisible = val
      if (!val) {
        this.userObjs = []
      } else {
        this.userObjs = this.userSelected
        this.search()
      }
    }
  },
  methods: {
    // 操作：向调用组件发送已选人员
    handleConfirm() {
      this.listQuery.text = ''
      this.$emit('confirm', this.userObjs)
    },
    // 取消显示指定辅导员的对话框
    handleCancel() {
      this.userObjs = []
      this.listQuery.text = ''
      this.$emit('cancel')
    },
    // 加载用户列表
    search() {
      // this.listLoading = true
      // getUser(this.listQuery).then(res => {
      //   if (res.data.rows) {
      //     this.userList = res.data.rows
      //   } else {
      //     this.userList = []
      //   }
      //   this.total = res.data.total
      //   if (this.userObjs.length > 0) {
      //     this.$nextTick(() => {
      //       this.userObjs.forEach(u => {
      //         this.userList.forEach(i => {
      //           if (u.userNo === i.userNo) {
      //             this.$refs.table.toggleRowSelection(i, true)
      //           }
      //         })
      //       })
      //     })
      //   }
      //   this.listLoading = false
      // }).catch(() => { this.listLoading = false })
    },
    // 切换每页显示个数
    handleSizeChange(val) {
      this.listQuery.pageVO.pageSize = val
      this.listQuery.pageVO.pageIndex = 1
      this.search()
    },
    // 切换页码
    handleCurrentChange(val) {
      this.listQuery.pageVO.pageIndex = val
      this.search()
    },
    // 多选的改变
    handleSelectionChange(selection, row) {
      // console.log('一个选的改变', selection, row)
      const ir = selection.findIndex(i => { return i.userNo === row.userNo })
      if (ir > -1) { // 选中
        const index = this.userObjs.findIndex(i => { return i.userNo === row.userNo })
        if (index <= -1) {
          this.userObjs.push(row)
        }
      } else { // 取消选中
        const index = this.userObjs.findIndex(i => { return i.userNo === row.userNo })
        if (index > -1) {
          this.userObjs.splice(index, 1)
        }
      }
    },
    // 全选的改变
    handleSelectionAll(selection) {
      // console.log('全选的改变', selection)
      if (selection.length === this.userList.length) { // 全选-选中
        this.userList.forEach(i => {
          if (this.userObjs.findIndex(u => { return u.userNo === i.userNo }) <= -1) {
            this.userObjs.push(i)
          }
        })
      } else { // 全部取消选中
        const newUserObjs = []
        this.userObjs.forEach(i => {
          if (this.userList.findIndex(u => { return u.userNo === i.userNo }) <= -1) {
            newUserObjs.push(i)
          }
        })
        this.userObjs = JSON.parse(JSON.stringify(newUserObjs))
      }
    },
    // 关闭tag
    handleCloseTag(tag) {
      // console.log('关闭标签', tag)
      const index = this.userObjs.findIndex(i => { return i.userNo === tag.userNo })
      if (index > -1) {
        this.userObjs.splice(index, 1)
      }
      const index2 = this.userList.findIndex(i => { return i.userNo === tag.userNo })
      // console.log('列表的判断', index2)
      if (index2 > -1) {
        this.$nextTick(() => {
          this.$refs.table.toggleRowSelection(this.userList[index2], false)
        })
      }
    }
  }
}
</script>
